<template>
  <div class="page">
    <Card title="厂区总人数">
      <div class="cqzrs">
        <span class="rs-lable">总人数</span>
        <div style="display: flex; margin-right: 20px">
          <div class="num-box">{{ this.zrs[0] }}</div>
          <div class="num-box">{{ this.zrs[1] }}</div>
          <div class="num-box">{{ this.zrs[2] }}</div>
          <div class="num-box">{{ this.zrs[3] }}</div>
          <div class="num-box">{{ this.zrs[4] }}</div>
          <div class="num-box">{{ this.zrs[5] }}</div>
          <div class="num-box">{{ this.zrs[6] }}</div>
        </div>
      </div>
    </Card>
    <Card title="企业基础信息">
      <div class="info">
        <div style="display: flex; padding: 12px 0">
          <div class="label">企业名称</div>
          <div class="value">{{ qiyeInfo.enterpriseName }}</div>
        </div>
        <div style="display: flex; padding: 12px 0">
          <div style="display: flex">
            <div class="label">行政区域</div>
            <div class="wvalue">{{ qiyeInfo.adminArea }}</div>
          </div>
          <div style="display: flex">
            <div class="label">企业人数</div>
            <div class="wvalue">{{ qiyeInfo.scale }}</div>
          </div>
        </div>
        <div style="display: flex; padding: 12px 0">
          <div style="display: flex">
            <div class="label">机构代码</div>
            <div class="wvalue">{{ qiyeInfo.mechanismCode }}</div>
          </div>
          <div style="display: flex">
            <div class="label">经营地址</div>
            <div class="wvalue">{{ qiyeInfo.manageAddress }}</div>
          </div>
        </div>
        <div style="display: flex; padding: 12px 0">
          <div class="label">企业简介</div>
          <div class="value">{{ qiyeInfo.brief }}</div>
        </div>
      </div>
      <div class="whp">
        <div class="whp-item">
          <img src="../assets/icon1.png" alt="" />
          <div>
            <div>危险化学品数量</div>
            <div style="margin-top: 3px">
              <span class="whp-value">{{ whpInfo.total }}</span>
              <span style="margin-left: 6px">种</span>
            </div>
          </div>
        </div>
        <div class="whp-item">
          <img src="../assets/icon2.png" alt="" />
          <div>
            <div>重点监管化学品</div>
            <div style="margin-top: 3px">
              <span class="whp-value">{{ whpInfo.jianguan }}</span>
              <span style="margin-left: 6px">种</span>
            </div>
          </div>
        </div>
      </div>
    </Card>

    <Card title="危险源统计">
      <PieVue ref="pieChart"> </PieVue>
    </Card>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import Close from "../components/close.vue";
import AlarmNum from "../components/AlarmNum.vue";
import Echarts from "../components/Echarts.vue";
import CcgTable from "../components/ccgTable.vue";
import BorderCard from "../components/borderCard.vue";
import {
  bjcs,
  dangerBj,
  zdwxy,
  history,
  cqzrs,
  wxhxp,
  qyjcxx,
} from "@/api/threeD.js";
import Table from "../components/table.vue";
import Card from "../components/Card.vue";
import PieVue from "../echarts/pie.vue";
import LineChart from "../echarts/line.vue";
import { fxCount } from "@/api/common.js";
export default defineComponent({
  name: "LeftMenu",
  components: {
    AlarmNum,
    CcgTable,
    Close,
    BorderCard,
    Echarts,
    Table,
    Card,
    PieVue,
    LineChart,
  },
  data() {
    return {
      marginBottom: 30,
      marginTop: 30,
      showList: false,
      selectList: [],
      selectedWxy: {},
      qiyeInfo: {},
      whpInfo: {},
      zrs: {},
    };
  },
  methods: {},
  mounted() {
    fxCount().then((res) => {
      let total = 0;
      res.data.forEach((item) => (total += item.count));
      const sort = {
        非重大: 1,
        一级: 2,
        二级: 3,
        三级: 4,
        四级: 5,
      };
      this.$refs.pieChart.setData({
        total,
        data: res.data
          .map((item) => ({
            value: item.count,
            name: item.dangerLevel,
            sort: sort[item.dangerLevel],
          }))
          .sort((a, b) => {
            return a.sort - b.sort;
          }),
        center: "危险源总数",
        color: ["#27CBFF", "#FFCB41", "#FF8C21", "#FF5F55", '"#990000"'],
      });
    });
    wxhxp().then((res) => {
      this.whpInfo = res.data;
    });
    qyjcxx().then((res) => {
      this.qiyeInfo = res.rows[0];
    });
    const numst = "0000000".split("");
    let index = 6;
    let index2 = numst.length - 1;
    while (index >= 0 && index2 >= 0) {
      this.zrs[index] = numst[index2];
      index--;
      index2--;
    }
    cqzrs().then((res) => {
      let node = res.data.data.find((item) => item.name == "总图");
      let numStr = (node.count + "").split("");
      let index = 6;
      let index2 = numStr.length - 1;
      while (index >= 0 && index2 >= 0) {
        this.zrs[index] = numStr[index2];
        index--;
        index2--;
      }
    });
  },
});
</script>

<style lang="scss" scoped>
.left-menu {
  position: relative;
  width: 360px;
  height: 934px;
  color: #fff;

  &-close {
    position: absolute;
    top: 13px;
    right: 7px;
    z-index: 9;
    transform: rotate(-17deg);
    cursor: pointer;
  }
}

.page {
  width: 418px;
  height: 934px;
  padding-top: 15px;
  background-image: url("../assets/pagebg.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  backdrop-filter: blur(10px);
  background-position: center center;
  overflow: hidden;
  color: #fff;
}
.info {
  padding: 10px 25px;
  .label {
    width: 65px;
    font-size: 14px;
    font-family: "Noto Sans CJK SC";
  }
  .value {
    width: 300px;
    max-height: 180px;
    overflow: auto;
    color: #00f0ff;
    font-size: 14px;
    font-family: "Noto Sans CJK SC";
  }
  .wvalue {
    width: 115px;
    font-family: "Noto Sans CJK SC";
    color: #00f0ff;
    word-break: break-all;
    font-size: 14px;
  }
}
.whp {
  background-color: rgba(94, 138, 152, 0.2);
  width: 372px;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  &-item {
    display: flex;
    margin: 0 10px;
    font-size: 12px;
  }
  &-value {
    font-size: 30px;
    color: #00f0ff;
  }
}
.cqzrs {
  display: flex;
  padding: 20px 0 0 30px;
  justify-content: space-between;
  .rs-lable {
    height: 35px;
    line-height: 35px;
  }
  .num-box {
    background-image: url("../assets/numbg.png");
    width: 35px;
    height: 35px;
    margin-right: 3px;
    font-size: 25px;
    line-height: 35px;
    text-align: center;
  }
}
</style>
